<template>
  <div id="awardDetails">
    <topSearch :formInline="formInline" @searchList="searchList"></topSearch>
    <div class="table-conBtn">
      <el-button type="warning" @click="exportFile">导出</el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>

    <el-table :data="tableData" border style="width: 100%;margin-top:20px">
      <el-table-column label="序号" align="center" width="150">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="dpAccount"
        label="大鹏号"
        min-width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="手机号"
        min-width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="userType"
        label="用户类型"
        min-width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column label="免费抽奖次数" min-width="100" align="center">
        <template slot-scope="scope">
          <div @click="handleShowFree(scope.row)">
            {{ scope.row.freeCount }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="付费抽奖次数" min-width="100" align="center">
        <template slot-scope="scope">
          <div @click="handleShowPay(scope.row)">
            {{ scope.row.payCount }}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <payDialog :tableList="payTableList" :show="showPay"></payDialog>
    <freeDialog :tableList="tableList" :show="show"></freeDialog>
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
  </div>
</template>

<script>
import { lotteriesList } from '@/api/activeList/index'
import { awardDrawList, exportAwardList } from '@/api/activeList/index'
import payDialog from '@component/markingActive/common/awardDetails/payDialog'
import freeDialog from '@component/markingActive/common/awardDetails/freeDialog'
import topSearch from '@component/markingActive/common/awardDetails/topSearch'

export default {
  name: 'details',
  data() {
    return {
      activityId: '',
      showPay: {
        isShow: false
      },
      payTableList: [],
      payShow: {
        dpAccount: '',
        lotteryType: ''
      },
      tableList: [],
      freeShow: {
        dpAccount: '',
        lotteryType: ''
      },
      show: {
        isShow: false
      },
      formInline: {
        dpAccount: ''
      },
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页
      },
      total: 5,
      tableData: []
    }
  },
  components: {
    topSearch,
    freeDialog,
    payDialog
  },
  created() {
    this.activityId = this.$route.query.id
  },
  mounted() {
    this.searchList()
  },
  methods: {
    getFreeList() {
      let obj = {
        ...this.freeShow
      }
      lotteriesList(
        this.activityId,
        obj,
        (res) => {
          this.tableList = res
        },
        (err) => {}
      )
    },
    getPayList() {
      let obj = {
        ...this.payShow
      }
      lotteriesList(
        this.activityId,
        obj,
        (res) => {
          this.payTableList = res
        },
        (err) => {}
      )
    },
    handleShowPay(val) {
      this.payShow.lotteryType = 'PAY'
      this.payShow.dpAccount = val.dpAccount
      this.getPayList()
      this.showPay.isShow = true
    },
    handleShowFree(val) {
      this.freeShow.lotteryType = 'FREE'
      this.freeShow.dpAccount = val.dpAccount
      this.getFreeList()
      this.show.isShow = true
    },
    exportFile() {
      let obj = { ...this.formInline.dpAccount }
      let title = '抽奖明细导出'
      if (this.tableData.length == 1) {
        exportAwardList(this.activityId, obj, title, (err) => {})
      } else {
        this.$message({
          message: '当前没有数据可以导出',
          type: 'warning'
        })
      }
    },
    searchList() {
      let obj = { ...this.formInline, ...this.searchParams }
      awardDrawList(
        this.activityId,
        obj,
        (res) => {
          this.tableData = res.rows
          this.total = res.total
        },
        (err) => {
          this.$message({
            message: err.message,
            type: 'warning'
          })
        }
      )
    }
  }
}
</script>

<style lang="less" scoped>
#awardDetails {
}
</style>
